<template>
	<view style="height: 100%;">
		<zPage ref="paging" :to-bottom-loading-more-enabled="false" :refresher-status.sync="refresherStatus"
			:auto="false" @onRefresh="handleRefreshe">
			<template #refresher>
				<custom-refresher :status="refresherStatus" />
			</template>
			<view v-for="(item,index) in list" :key="item.messageid" :id="'m' + index">
				<!-- {{'m' + index}} -->
				<!-- 文字消息 -->
				<ItemText :itemText="item" v-if="item.type == 'text' || item.type == 'hello'"></ItemText>
				<!-- 文字消息 -->

				<!-- 发送图片 -->
				<ItemImg :itemImg="item" v-if="item.type == 'image'"></ItemImg>
				<!-- 发送图片 -->

				<!-- 发送简历开始 -->
				<ItemResume :itemResume="item" v-if="item.type == 'resume'"></ItemResume>
				<!-- 发送简历结束 -->

				<!-- 发送职位开始 -->
				<ItemJob :itemJob="item" v-if="item.type == 'job'"></ItemJob>
				<!-- 发送职位结束 -->

				<!-- 企业邀请投递简历开始 -->
				<ItemInvite :itemInvite="item" v-if="item.type == 'invite'"></ItemInvite>
				<!-- 企业邀请投递简历结束 -->

				<!-- 发送位置开始 -->
				<ItemMap :itemMap="item" v-if="item.type == 'map'"></ItemMap>
				<!-- 发送位置结束 -->

				<!-- 交换手机号开始 -->
				<ItemMobile :itemMobile="item" v-if="item.type == 'mobile'"
					@handleExchangeMobileRefuse="handleExchangeMobileRefuse"
					@handleExchangeMobileAgree="handleExchangeMobileAgree"></ItemMobile>
				<!-- 交换手机号结束 -->

				<!-- 交换微信号开始 -->
				<ItemWechat :itemWechat="item" v-if="item.type == 'wechat'"
					@handleExchangeWechatRefuse="handleExchangeWechatRefuse"
					@handleExchangeWechatAgree="handleExchangeWechatAgree"></ItemWechat>
				<!-- 交换微信号结束 -->

				<!-- 系统消息开始 -->
				<ItemSystem :itemSystem="item" v-if="item.type == 'system'"></ItemSystem>
				<!-- 系统消息结束 -->
			</view>
			<view id="toView"></view>
		</zPage>
	</view>
</template>

<script>
	import zPage from './z-paging/z-paging.vue'
	import ItemText from './item/ItemText.vue'
	import ItemImg from './item/ItemImg.vue'
	import ItemMap from './item/ItemMap.vue'
	import ItemMobile from './item/ItemMobile.vue'
	import ItemWechat from './item/ItemWechat.vue'
	import ItemResume from './item/ItemResume.vue'
	import ItemJob from './item/ItemJob.vue'
	import ItemInvite from './item/ItemInvite.vue'
	import ItemSystem from './item/ItemSystem.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		props: ['oldMessageListLength', 'messageList'],
		components: {
			ItemText,
			ItemImg,
			ItemMap,
			ItemMobile,
			ItemWechat,
			ItemResume,
			ItemJob,
			ItemInvite,
			ItemSystem,
			zPage
		},
		watch: {
			messageList(val) {
				console.log('聊天消息列表：', val)
				this.list = [...val]
				if (val.length <= 10) {
					this.updataToView()
				}
			},
			oldMessageListLength(val) {
				this.oldListLength = val
			},
			isUpdataToView: {
				handler: function(val) {
					if (val.oldListLength > 0) {
						this.updataToView()
					}
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			isUpdataToView() {
				return {
					list: this.list,
					oldListLength: this.oldListLength
				}
			}
		},
		data() {
			return {
				toView: '',
				list: [],
				oldListLength: 0,
				triggered: true,
				refresherStatus: 0
			}
		},
		methods: {
			// 更新状态
			updataToView() {
				this.toView = ""
				const query = uni.createSelectorQuery().in(this);
				if (this.list.length <= 10) {
					if (this.isRefs) {
						this.$nextTick(() => {
							query.select('#m0').boundingClientRect(data => {
								this.$refs.paging.scrollToY(data.top)
							}).exec();
						})
					} else {
						this.$nextTick(() => {
							query.select('#toView').boundingClientRect(data => {
								this.$refs.paging.scrollToY(data.top)
							}).exec();
						})
					}

				} else if (this.list.length > 10) {
					this.$nextTick(() => {
						this.toView = "m" + (this.list.length - this.oldListLength - 2)
						query.select('#' + this.toView).boundingClientRect(data => {
							this.$refs.paging.scrollToY(data.top)
						}).exec();
					})
				}

			},
			// input 获取焦点 更新 聊天消息列表位置
			inputUpdataToView() {
				this.toView = ""
				const query = uni.createSelectorQuery().in(this);
				this.$nextTick(() => {
					// query.select('#toView').boundingClientRect(data => {
					//   this.$refs.paging.scrollIntoViewByNodeTop(data.top)
					// }).exec();
					this.$refs.paging.scrollIntoViewById('toView')
					// scrollIntoViewById
				})
			},
			// 下拉刷新
			handleRefreshe() {
				this.$emit('handleRefreshe')
			},
			// 更新refer状态
			updtaRefer() {
				this.$refs.paging.endRefresh()
			},
			// 交换手机号拒绝
			handleExchangeMobileRefuse(mobile) {
				this.$emit('handleMobileRefuse', mobile)
			},
			// 交换手机号同意
			handleExchangeMobileAgree(mobile) {
				this.$emit('handleMobileAgree', mobile)
			},
			// 拒绝交换微信号
			handleExchangeWechatRefuse(wechat) {
				this.$emit('handleWechatRefuse', wechat)
			},
			// 同意交换微信号
			handleExchangeWechatAgree(wechat) {
				this.$emit('handleWechatAgree', wechat)
			},
		},
	}
</script>

<style lang="scss" scoped>

</style>